<template>
  <div class="header">
    <el-menu
      mode="horizontal"
      background-color="#20222a"
      text-color="rgba(255,255,255,.7)"
      active-text-color="#FFFFFF"
      menu-trigger="click">
      <div class="title">DDChain</div>
      <el-submenu index="1" class="right">
        <template slot="title" tabindex="-1">{{managerName}}</template>
        <el-menu-item index="1-1" @click="showPwdDialog">修改密码</el-menu-item>
        <el-menu-item index="1-1" @click="exitLogin">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
    <div v-if="showPwd">
      <div class="bg"></div>
      <div class="dialog">
        <div class="header">修改登录密码</div>
        <el-form :label-position="'left'" label-width="100px" :model="loginPwd">
          <el-form-item label="原始密码">
            <el-input type="password" v-model="loginPwd.oldPassword" show-password></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input type="password" v-model="loginPwd.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input type="password" v-model="loginPwd.surePassword" show-password></el-input>
          </el-form-item>
        </el-form>
        <div class="btn">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
// import Secret from 'common/utils/secret'
// import {ERR_OK, modifyPassword, loginOut} from 'api'
export default {
  name: 'MyHeader',
  data () {
    return {
      showPwd: false,
      loginPwd: {},
      managerName: ''
    }
  },
  mounted () {
    // this.managerName = localStorage.getItem('userName')
    this.managerName = 'admin'
  },
  methods: {
    cancel () {
      this.showPwd = false
    },
    showPwdDialog () {
      this.loginPwd = {}
      this.showPwd = true
    },
    save () {},
    exitLogin () {}
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/styl/variable';
@import '~common/styl/dialog';
.header
  width 100%
  height 60px
  .title
    display inline-block
    width 160px
    height 60px
    text-align center
    line-height 60px
    color $white_v1
    font-size 20px
  .right
    float right
.el-menu-item
  text-align center
.dialog
  width 420px
</style>
